<template>
  <div class="chart-filter-toolbar">
    <div class="filters-top">
      <div class="sort-frame">
        <!-- <div class="row">
          <img src="@/assets/image/chart-filter/icon01.jpg"/>
          <div class="time-frame clearfix">
            <span v-for="(item, index) in timeList" :key="index"
              class="btn"
              :class="{active: item.value == form.time}">{{item.label}}</span>
          </div>
        </div> -->
        <div class="row">
          <img src="@/assets/image/chart-filter/icon02.jpg"/>
          <div class="time-frame clearfix">
            <span v-for="(item, index) in sortList" :key="index"
              class="btn"
              :class="{active: item.value == props.sort}"
              @click="setSort(item.value)">{{item.label}}</span>
          </div>
        </div>
      </div>
      <div class="filters-toggle-btn" @click="form.toggle = !form.toggle">{{form.toggle ? '收起' : '展开'}}筛选</div>
    </div>
    <div v-show="form.toggle" class="filters-panel">
      <div class="row">
        <div class="name">图表</div>
        <div class="list clearfix">
          <div v-for="(item,index) in chartList" :key="index"
            class="item"
            :class="{active: props.type.indexOf(item.value) != -1}"
            @click="toggleType(item.value)">
              <img :src="item.img"/>
              <span>{{item.label}}</span>
            </div>
        </div>
      </div>
      <div class="row">
        <div class="name">组件</div>
        <div class="list clearfix">
          <div v-for="(item,index) in componentList" :key="index"
            class="item"
            :class="{active: props.type.indexOf(item.value) != -1}"
            @click="toggleType(item.value)">
              <img :src="item.img"/>
              <span>{{item.label}}</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import {reactive, onMounted} from "vue";
  import chart01 from "@/assets/image/chart-filter/chart01.jpg";
  import chart02 from "@/assets/image/chart-filter/chart02.jpg";
  import chart03 from "@/assets/image/chart-filter/chart03.jpg";
  import chart04 from "@/assets/image/chart-filter/chart04.jpg";
  import chart05 from "@/assets/image/chart-filter/chart05.jpg";
  import chart06 from "@/assets/image/chart-filter/chart06.jpg";
  import chart07 from "@/assets/image/chart-filter/chart07.jpg";
  import chart08 from "@/assets/image/chart-filter/chart08.jpg";
  import chart09 from "@/assets/image/chart-filter/chart09.jpg";
  import chart10 from "@/assets/image/chart-filter/chart10.jpg";
  import chart11 from "@/assets/image/chart-filter/chart11.jpg";
  import chart12 from "@/assets/image/chart-filter/chart12.jpg";
  import chart13 from "@/assets/image/chart-filter/chart13.jpg";
  import chart14 from "@/assets/image/chart-filter/chart14.jpg";
  import chart15 from "@/assets/image/chart-filter/chart15.jpg";
  import chart16 from "@/assets/image/chart-filter/chart16.jpg";
  import chart17 from "@/assets/image/chart-filter/chart17.jpg";
  import chart18 from "@/assets/image/chart-filter/chart18.jpg";
  import chart19 from "@/assets/image/chart-filter/chart19.jpg";
  import chart20 from "@/assets/image/chart-filter/chart20.jpg";
  import chart21 from "@/assets/image/chart-filter/chart21.jpg";
  import chart22 from "@/assets/image/chart-filter/chart22.jpg";
  import chart23 from "@/assets/image/chart-filter/chart23.jpg";
  import chart24 from "@/assets/image/chart-filter/chart24.jpg";
  import chart25 from "@/assets/image/chart-filter/chart25.jpg";
  import chart26 from "@/assets/image/chart-filter/chart26.jpg";
  import chart27 from "@/assets/image/chart-filter/chart27.jpg";
  import chart28 from "@/assets/image/chart-filter/chart28.jpg";
  import chart29 from "@/assets/image/chart-filter/chart29.jpg";
  import chart30 from "@/assets/image/chart-filter/chart30.jpg";
  import chart31 from "@/assets/image/chart-filter/chart31.jpg";
  import chart32 from "@/assets/image/chart-filter/chart32.jpg";

  let form = reactive({
    time: 'all',
    sort: 'lastUpdateTime',
    toggle: false,
  })

  let timeList = reactive([
    {label: '日', value: 'day'},
    {label: '周', value: 'week'},
    {label: '月', value: 'month'},
    {label: '全部', value: 'all'},
  ])

  let sortList = reactive([
    {label: '浏览量', value: 'viewCount'},
    {label: '赞赏数', value: 'starCount'},
    {label: '最新', value: 'lastUpdateTime'},
  ])

  let chartList = reactive([
    {label: '折线图', value: 'series-line', img: chart01},
    {label: '柱形图', value: 'series-bar', img: chart02},
    {label: '散点图', value: 'series-scatter', img: chart03},
    {label: '饼图', value: 'series-pie', img: chart04},
    {label: '地图', value: 'series-map', img: chart05},
    {label: '线图', value: 'series-lines', img: chart06},
    {label: '雷达图', value: 'series-radar', img: chart07},
    {label: 'k线图', value: 'series-candlestick', img: chart08},
    {label: '箱线图', value: 'series-boxplot', img: chart09},
    {label: '热力图', value: 'series-heatmap', img: chart10},
    {label: '关系图', value: 'series-graph', img: chart11},
    {label: '矩形树图', value: 'series-treemap', img: chart12},
    {label: '平行坐标', value: 'series-parallel', img: chart13},
    {label: '桑基图', value: 'series-sankey', img: chart14},
    {label: '漏斗图', value: 'series-funnel', img: chart15},
    {label: '仪表盘', value: 'series-gauge', img: chart16},
  ])

  let componentList = reactive([
    {label: '直角坐标', value: 'grid', img: chart17},
    {label: '极坐标', value: 'polar', img: chart18},
    {label: '地理坐标', value: 'geo', img: chart19},
    {label: '单轴', value: 'singleAxis', img: chart20},
    {label: '区域缩放', value: 'dataZoom', img: chart21},
    {label: '刷选', value: 'brush', img: chart22},
    {label: '视觉映射', value: 'visualMap', img: chart23},
    {label: '提示框', value: 'tooltip', img: chart24},
    {label: '工具栏', value: 'toolbox', img: chart25},
    {label: '时间轴', value: 'timeline', img: chart26},
    {label: '标注', value: 'markPoint', img: chart27},
    {label: '标线', value: 'markLine', img: chart28},
    {label: '标域', value: 'markArea', img: chart29},
    {label: '标题', value: 'title', img: chart30},
    {label: '百度地图', value: 'bmap', img: chart31},
    {label: '日历坐标系', value: 'calendar', img: chart32},
  ])

  // pops属性定义
  const props = defineProps({
    sort: String,
    type: Array
  })

  const emit = defineEmits(['setForm']);

  // 设置sort
  function setSort (val) {
    emit('setForm', 'sort', val);
  }

  // 切换类型
  function toggleType (val) {
    let arr = JSON.parse(JSON.stringify(props.type));
    let idx = arr.indexOf(val);
    if (idx == -1) {
      arr.push(val);
    } else {
      arr.splice(idx, 1);
    }
    emit('setForm', 'type', arr);
  }

  
</script>
<style lang="scss" scoped>
.chart-filter-toolbar {
  padding: 25px 10px;
  .filters-top {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;

    .sort-frame {
      display: flex;
      .row {
        display: flex;
        align-items: center;
        margin-right: 50px;
        img {
          width: 15px;
          height: 15px;
        }
        .btn {
          float: left;
          margin: 0 10px 0 5px;
          padding: 5px 10px;
          cursor: pointer;
          border-radius: 3px;
          &.active {
            color: #e43c59;
            background: #fdeff2;
          }
        }
      }
    }
    .filters-toggle-btn {
      padding: 6px 15px;
      font-size: 12px;
      box-shadow: 0 0 1px rgba(0,0,0,0.3);
      cursor: pointer;
      background: #f8f8f8;
      &:hover {
        background: #fff;
      }
    }
  }
  .filters-panel {
    margin-bottom: 10px;
    padding: 10px 10px 0 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
    border-radius: 5px;
    background: #fff;
    .row {
      position: relative;
      padding-bottom: 16px;
      padding-left: 90px;
      .name {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        line-height: 73px;
        text-align: center;
      }
      .list {
        .item {
          float: left;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          margin-right:5px;
          padding-top: 5px;
          width: 60px;
          height: 73px;
          cursor: pointer;
          border-radius: 3px;
          &:hover, &.active {
            background: rgba(200,200,200,0.3);
          }
          img {
            width: 40px;
            height: 40px;
          }
          span {
            display: inline-block;
            line-height: 20px;
            font-size: 12px;
          }
        }
      }
    }
  }
  
}
</style>